<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 用户充值管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="用户代码">
                        <el-input
                            v-model="searchSet.userCode"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入用户代码"
                        ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="用户昵称">
                        <el-input
                            v-model="searchSet.userName"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入用户昵称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="用户手机号">
                        <el-input
                            v-model="searchSet.userMobile"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入用户手机号"
                        ></el-input>
                    </el-form-item> -->
                    <el-form-item label="充值起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label for="">~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-select v-model="searchSet.status" placeholder="选择状态" clearable>
                            <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="货币种类">
                        <el-select v-model="searchSet.currencyid" placeholder="选择货币种类" clearable>
                            <el-option
                                v-for="(item, index) in currencyList"
                                :key="index"
                                :label="`${item.name}(${item.code})`"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="handleAddNew">添加记录</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>
            <el-table :data="tableData" v-loading="tableLoading" border class="table" ref="mainTable" :row-class-name="tableRowClassName">
                <el-table-column prop="usercode" label="用户代码" align="center"></el-table-column>
                <el-table-column prop="username" label="用户昵称" align="center"></el-table-column>
                <el-table-column prop="usermobile" label="用户手机号" align="center"></el-table-column>
                <el-table-column prop="currencyName" label="货币名称" align="center"></el-table-column>
                <el-table-column prop="paytype" :formatter="formatpaytype" label="充值方式" align="center"></el-table-column>
                <el-table-column prop="amount" label="金额" align="center"></el-table-column>
                <el-table-column prop="remainAmount" label="余额" align="center"></el-table-column>
                <el-table-column prop="addtime" width="160" label="充值时间" align="center"></el-table-column>
                <el-table-column prop="status" label="单据状态" :formatter="formatStatus" align="center"></el-table-column>
                <el-table-column label="用户上传图片" min-width="130" align="center">
                    <template slot-scope="scope">
                        <el-image
                            v-if="scope.row.images.length"
                            class="UserCheckImage"
                            :src="baseFileURL + scope.row.images[0]"
                            fit="contain"
                            :preview-src-list="previewSrcList"
                        ></el-image>
                        <div v-else>暂无图片</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="70" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            v-if="scope.row.status == 2"
                            icon="el-icon-s-check"
                            @click="handleCheck(scope.$index, scope.row)"
                            >审核</el-button
                        >
                        <el-button type="text" icon="el-icon-s-order" @click="handleAccountDetail(scope.$index, scope.row)"
                            >账户明细</el-button
                        >
                        <el-button
                            type="text"
                            icon="el-icon-s-order"
                            v-if="scope.row.status == 1"
                            @click="handleAccountPay(scope.$index, scope.row)"
                            >用户清账</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>

        <el-dialog title="添加操作" v-dialogDrag center :visible.sync="editVisible" width="60%">
            <el-form ref="form" size="mini" :model="form" :rules="formRules" label-width="120px">
                <el-form-item label="用户ID" prop="userid">
                    <el-input
                        v-model="form.userid"
                        placeholder="请输入用户ID"
                        maxlength="30"
                        show-word-limit
                        clearable
                        class="formInput"
                    ></el-input>
                </el-form-item>
                <el-form-item label="货币种类" prop="currencyid">
                    <el-select v-model="form.currencyid" class="formInput" placeholder="选择货币种类" clearable>
                        <el-option
                            v-for="(item, index) in currencyList"
                            :key="index"
                            :label="`${item.name}(${item.code})`"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值方式" prop="paytype">
                    <el-select v-model="form.paytype" class="formInput" placeholder="选择充值方式" clearable>
                        <el-option v-for="item in paytypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值金额" prop="amount">
                    <el-input
                        v-model="form.amount"
                        placeholder="请输入充值金额"
                        maxlength="10"
                        show-word-limit
                        clearable
                        class="formInput"
                    ></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNew">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="审核操作" :visible.sync="checkVisible" width="60%">
            <el-form ref="formCheck" size="mini" :model="formCheck" :rules="formRules" label-width="120px">
                <el-form-item label="货币种类" prop="currencyid">
                    <el-select v-model="formCheck.currencyid" class="formInput" placeholder="选择货币种类" clearable>
                        <el-option
                            v-for="(item, index) in currencyList"
                            :key="index"
                            :label="`${item.name}(${item.code})`"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值方式" prop="paytype">
                    <el-select v-model="formCheck.paytype" class="formInput" placeholder="选择充值方式" clearable>
                        <el-option v-for="item in paytypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值金额" prop="amount">
                    <el-input
                        v-model="formCheck.amount"
                        placeholder="请输入充值金额"
                        maxlength="10"
                        show-word-limit
                        clearable
                        class="formInput"
                    ></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="checkVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCheck">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="帐户明细" v-dialogDrag center :visible.sync="detailAccountVisible" width="85%">
            <el-descriptions :column="1" style="margin-bottom: 20px" border>
                <el-descriptions-item label="用户编码">
                    {{ detailform.usercode }}
                </el-descriptions-item>
                <el-descriptions-item label="用户姓名">
                    {{ detailform.userName }}
                </el-descriptions-item>
                <el-descriptions-item label="用户手机号">
                    {{ detailform.userMobil }}
                </el-descriptions-item>
            </el-descriptions>
            <div>
                <div>合计:</div>
                <div>
                    <ul>
                        <li v-for="item in detailUserAccounts" :key="item.currencyid">
                            {{ item.currencyname }}:<span>充值金额:</span>{{ item.chargeamount }}<span>支出金额:</span
                            >{{ item.consumeamount }}
                        </li>
                    </ul>
                </div>
            </div>
            <!-- <el-table
                :data="detailUserAccounts"
                v-loading="false"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >                
                <el-table-column prop="currencyname" label="币种" align="center"></el-table-column>
                <el-table-column prop="chargeamount" label="充值金额" align="center"></el-table-column>
                <el-table-column prop="consumeamount" label="支出金额" align="center"></el-table-column>                
            </el-table> -->
            <el-table
                :data="tableDetailData"
                v-loading="tableDetailLoading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': typeOption[scope.row.type] ? typeOption[scope.row.type].color : '#909399'
                            }"
                        >
                            {{ typeOption[scope.row.type] ? typeOption[scope.row.type].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="currencyname" label="币种" align="center"></el-table-column>
                <el-table-column prop="amount" label="金额" align="center"></el-table-column>
                <el-table-column prop="adduser" label="经手人" align="center"></el-table-column>
                <el-table-column prop="addtime" label="时间" align="center"></el-table-column>
                <el-table-column label="充值方式" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': chargeTypeOption[scope.row.paytype]
                                    ? chargeTypeOption[scope.row.paytype].color
                                    : '#909399'
                            }"
                        >
                            {{ chargeTypeOption[scope.row.paytype] ? chargeTypeOption[scope.row.paytype].label : '系统清账' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-s-order"
                            @click="handleDetailOrder(scope.$index, scope.row)"
                            v-if="scope.row.ordercode"
                            >{{ scope.row.ordercode }}</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="detailQuery.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="detailQuery.pageSize"
                    :total="itemDetailTotal"
                    @current-change="handleDetailPageChange"
                    @size-change="handleDetailPageSizeChange"
                ></el-pagination>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailAccountVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="用户清账" v-dialogDrag center :visible.sync="detailPayVisible" width="95%">
            <el-descriptions :column="1" style="margin-bottom: 20px" border>
                <el-descriptions-item label="用户编码">
                    {{ detailPayform.usercode }}
                </el-descriptions-item>
                <el-descriptions-item label="用户姓名">
                    {{ detailPayform.userName }}
                </el-descriptions-item>
                <el-descriptions-item label="用户手机号">
                    {{ detailPayform.userMobil }}
                </el-descriptions-item>
                <el-descriptions-item label="币种">
                    {{ detailPayform.currencyName }}
                </el-descriptions-item>
                <el-descriptions-item label="充值金额">
                    {{ detailPayform.amount }}
                </el-descriptions-item>
                <el-descriptions-item label="余额">
                    {{ detailPayform.remainAmount }}
                </el-descriptions-item>
            </el-descriptions>

            <el-table
                :data="tablePayDetailData"
                v-loading="tablePayDetailLoading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="currencyname" label="内单号" align="center"></el-table-column>
                <el-table-column prop="amount" label="金额" align="center"></el-table-column>
                <el-table-column prop="paytime" label="时间" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="detailPayQuery.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="detailPayQuery.pageSize"
                    :total="itemPayDetailTotal"
                    @current-change="handlePayDetailPageChange"
                    @size-change="handlePayDetailPageSizeChange"
                ></el-pagination>
            </div>

            <el-table
                :data="tableUserPayDetailData"
                v-loading="tableUserPayDetailLoading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="code" label="内单号" align="center"></el-table-column>
                <el-table-column prop="price" label="金额($)" align="center"></el-table-column>
                <el-table-column prop="targetprice" label="金额(￥)" align="center"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="payRow">
                        <el-button type="text" icon="el-icon-s-order" @click="handleUserPay(payRow.$index, payRow.row)">用户清账</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="detailUserPayQuery.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="detailUserPayQuery.pageSize"
                    :total="itemUserPayDetailTotal"
                    @current-change="handleUserPayDetailPageChange"
                    @size-change="handleUserPayDetailPageSizeChange"
                ></el-pagination>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailAccountVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <detailDialog :visible.sync="detailOrderVisible" :data="detailOrderForm" :dataType="detailOrderType"> </detailDialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import dataTable from './dataTable';
import detailDialog from '../../common/dialog/detailDialog.vue';
export default {
    name: 'userAccountCharge',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        let CheckDigit = (rule, value, callback) => {
            if (!StringTool.DigitNumber(String(value))) {
                return callback(new Error('只能为整数和保留两位小数'));
            }
            if (Number(value) < 0) {
                return callback(new Error('只能为正数'));
            }
            callback();
        };
        return {
            searchSet: {
                userCode: '',
                userName: '',
                userMobile: '',
                startTime: '',
                endTime: '',
                currencyid: '',
                status: '',
                paytype: ''
            },
            paytypeOptions: {
                1: { label: '银行转帐', value: 1 },
                2: { label: '微信转帐', value: 2 },
                3: { label: '支付宝转帐', value: 3 },
                4: { label: '现金', value: 4 }
            },
            currencyList: [],
            statusList: { 0: { name: '无效', id: '0' }, 1: { name: '已确认', id: '1' }, 2: { name: '待确认', id: '2' } },

            editVisible: false,
            checkVisible: false,
            form: {},
            formCheck: {},
            formRules: {
                userid: [
                    { required: true, message: '参数不能为空', trigger: 'blur' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                currencyid: [{ required: true, message: '参数不能为空', trigger: 'blur' }],
                amount: [{ validator: CheckDigit, required: true, trigger: 'blur' }]
            },
            detailQuery: {
                index: 1,
                pageSize: 10
            },
            detailPayQuery: {
                index: 1,
                pageSize: 10
            },
            detailUserPayQuery: {
                index: 1,
                pageSize: 10
            },
            detailAccountVisible: false,
            detailform: {},
            detailVisible: false,
            tableDetailData: [],
            itemDetailTotal: 0,
            tableDetailLoading: false,
            detailPayform: {},
            detailPayVisible: false,
            tablePayDetailData: [],
            itemPayDetailTotal: 0,
            tablePayDetailLoading: false,
            tableUserPayDetailData: [],
            itemUserPayDetailTotal: 0,
            tableUserPayDetailLoading: false,
            detailUserAccounts: [],
            typeOption: {
                '-1': { label: '支出', value: '-1', color: '#ffb248' },
                1: { label: '充值', value: '1', color: '#339ca8' }
            },

            chargeTypeOption: {
                1: { label: '银行转帐', value: 1, color: '#ffb248' },
                2: { label: '微信转帐', value: 2, color: '#339ca8' },
                3: { label: '支付宝转帐', value: 3, color: '#eb8146' },
                4: { label: '现金', value: 4, color: '#67C23A' }
            },
            detailOrderVisible: false,
            detailVisible: false,
            detailOrderQuery: {},
            detailOrderForm: {
                id: '',
                code: '',
                agentid: '',
                agentname: '',
                agentprice: '',
                localagentprice: '',
                price: '',
                freightprice: '',
                appusercode: '',
                username: '',
                userPay: {},
                agentPay: {}
            },
            detailOrderType: [
                {
                    attrs: { column: 2, title: '基础信息' },
                    list: [
                        { label: '内单号', key: 'code' },
                        { label: '代理商', key: 'agentname' },
                        { label: '代理商价格$', key: 'agentprice' },
                        { label: '支付金额$', key: 'price' },
                        { label: '客户代码', key: 'appusercode' }
                    ]
                },
                {
                    attrs: { column: 2, title: '客户支付' },
                    list: [
                        { label: '支付时间', key: 'userPaypaytime' },
                        { label: '经手人', key: 'userPayusername' },
                        { label: '货币', key: 'userPaycurrencyname' },
                        { label: '金额', key: 'userPayamount' }
                    ]
                },
                {
                    attrs: { column: 2, title: '代理商支付' },
                    list: [
                        { label: '支付时间', key: 'agentPaypaytime' },
                        { label: '经手人', key: 'agentPayusername' },
                        { label: '货币', key: 'agentPaycurrencyname' },
                        { label: '金额', key: 'agentPayamount' }
                    ]
                }
            ]
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    computed: {
        baseFileURL: function () {
            return this.$store.state.baseURL + 'api/File?id=';
        },
        previewSrcList: function () {
            let list = [];
            this.tableData.map((it) => {
                if (it.images.length > 0) {
                    list.push(this.baseFileURL + it.images[0]);
                }
            });
            // `this` 指向 vm 实例
            return list;
        }
    },
    methods: {
        //页面初始化
        init() {
            this.getData();
            API.StandardDoWith(API.Currency.Get({ status: 1 }), this, {
                success: (detail) => {
                    this.currencyList = detail;
                }
            });
        },
        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.UserAccountCharge.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },

        handleAddNew() {
            this.form = {
                userid: '',
                currencyid: null,
                amount: '',
                paytype: ''
            };
            this.editVisible = true;
        },

        handleCheck(index, row) {
            this.formCheck = {
                id: row.id,
                currencyid: null,
                amount: '',
                paytype: ''
            };
            this.checkVisible = true;
        },
        saveNew() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.form.amount = Number(this.form.amount);
                    API.StandardDoWith(API.UserAccountCharge.Post(this.form), this, {
                        success: (detail) => {
                            this.editVisible = false;
                            this.$message.success(`成功新建记录`);
                            this.getData();
                        }
                    });
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        // 保存编辑
        saveCheck() {
            this.$refs.formCheck.validate((valid) => {
                if (valid) {
                    this.formCheck.amount = Number(this.formCheck.amount);
                    API.StandardDoWith(API.UserAccountCharge.Patch(this.formCheck), this, {
                        success: (detail) => {
                            this.checkVisible = false;
                            this.$message.success(`成功提交审核`);
                            this.getData();
                        }
                    });
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        formatStatus(row, column, cellValue, index) {
            return this.statusList[cellValue].name;
        },
        tableRowClassName({ row, rowIndex }) {
            if (Number(row.status) == 2) {
                return 'warning-row';
            } else if (Number(row.status) == 1) {
                return 'success-row';
            }
            return '';
        },
        formatpaytype(row, column, cellValue, index) {
            return this.paytypeOptions[cellValue].label;
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.UseraccountchargeExport(), 'APP用户充值数据.xlsx');
                })
                .catch((err) => {});
        },
        handleAccountDetail(index, row) {
            this.detailform = null;
            this.tableDetailData = [];
            this.itemDetailTotal = 0;
            this.detailUserAccounts = [];
            this.detailQuery = {
                index: 1,
                pageSize: 10
            };
            this.detailform = {};
            this.detailform.appuser = row.userid;
            this.detailform.usercode = row.usercode;
            this.detailform.userMobil = row.usermobile;
            this.detailform.userName = row.username;

            this.detailQuery.id = this.detailform.appuser;
            this.getDetailData();
        },
        handleAccountPay(index, row) {
            this.detailPayform = null;
            this.tablePayDetailData = [];
            this.itemPayDetailTotal = 0;
            this.detailPayQuery = {
                index: 1,
                pageSize: 10
            };
            this.detailUserPayQuery = {
                index: 1,
                pageSize: 10
            };
            this.detailPayform = {};
            this.detailPayform.id = row.id;
            this.detailPayform.appuser = row.userid;
            this.detailPayform.usercode = row.usercode;
            this.detailPayform.userMobil = row.usermobile;
            this.detailPayform.userName = row.username;
            this.detailPayform.amount = row.amount;
            this.detailPayform.remainAmount = row.remainAmount;
            this.detailPayform.currencyid = row.currencyid;
            this.detailPayform.currencyName = row.currencyName;
            this.detailPayQuery.id = this.detailPayform.id;
            this.detailUserPayQuery.userCode = this.detailPayform.usercode;
            this.detailUserPayQuery.ispayed = 0;

            this.getPayData();
            this.getUnPayData();
        },
        getPayData() {
            this.tablePayDetailLoading = false;
            API.StandardDoWith(API.UserChargeConsume.Get(this.detailPayQuery), this, {
                success: (detail) => {
                    this.tablePayDetailData = detail.list;
                    this.itemPayDetailTotal = detail.count;
                    this.detailPayVisible = true;
                },
                complete: () => {
                    this.tablePayDetailLoading = false;
                }
            });
        },
        getUnPayData() {
            this.tableUserPayDetailLoading = false;
            API.StandardDoWith(API.OrderApplyAccount.Get(this.detailUserPayQuery), this, {
                success: (detail) => {
                    this.tableUserPayDetailData = detail.list;
                    this.itemUserayDetailTotal = detail.count;
                },
                complete: () => {
                    this.tableUserPayDetailLoading = false;
                }
            });
        },
        getDetailData() {
            this.tableDetailLoading = false;
            API.StandardDoWith(API.AppUserData.Get(this.detailQuery), this, {
                success: (detail) => {
                    this.tableDetailData = detail.list;
                    this.itemDetailTotal = detail.count;
                    this.detailUserAccounts = detail.accounts;
                    this.detailAccountVisible = true;
                },
                complete: () => {
                    this.tableDetailLoading = false;
                }
            });
        },
        handleDetailPageChange(val) {
            this.$set(this.detailQuery, 'index', val);
            this.getDetailData();
        },
        handleDetailPageSizeChange(val) {
            this.$set(this.detailQuery, 'pageSize', val);
            this.getDetailData();
        },
        handlePayDetailPageChange(val) {
            this.$set(this.detailPayQuery, 'index', val);
            this.getPayData();
        },
        handlePayDetailPageSizeChange(val) {
            this.$set(this.detailPayQuery, 'pageSize', val);
            this.getPayData();
        },
        handleUserPayDetailPageChange(val) {
            this.$set(this.detailUserPayQuery, 'index', val);
            this.getUserPayData();
        },
        handleUserPayDetailPageSizeChange(val) {
            this.$set(this.detailUserPayQuery, 'pageSize', val);
            this.getUserPayData();
        },
        handleUserPay(index, row) {
            let postForm = {};
            postForm.id = this.detailPayform.id;
            postForm.orders = [];
            postForm.orders[0] = row.id;
            API.StandardDoWith(API.UserChargeConsume.Post(postForm), this, {
                success: (detail) => {
                    this.detailPayform.remainAmount = Number(detail);
                    this.$message.success(`清账成功`);
                    this.getPayData();
                    this.getUnPayData();
                },
                complete: () => {}
            });
        },
        handleDetailOrder(index, row) {
            this.detailOrderForm = null;
            this.detailOrderForm = {};
            this.detailOrderForm.code = row.ordercode;
            this.detailOrderQuery.code = this.detailOrderForm.code;
            API.StandardDoWith(API.PackageDeliver.Get(this.detailOrderQuery), this, {
                success: (detail) => {
                    console.log(detail);
                    detail = detail.list[0];
                    this.detailOrderForm.id = detail.id;
                    this.detailOrderForm.agentid = detail.agentid;
                    this.detailOrderForm.agentname = detail.agentname;
                    this.detailOrderForm.agentprice = detail.agentprice;
                    this.detailOrderForm.localagentprice = detail.localagentprice;
                    this.detailOrderForm.price = detail.price;
                    this.detailOrderForm.freightprice = detail.freightprice;
                    this.detailOrderForm.appusercode = detail.appusercode;
                    this.detailOrderForm.username = detail.userName;

                    if (detail.userPay) {
                        this.detailOrderForm.userPaypaytime = detail.userPay.paytime;
                        this.detailOrderForm.userPayuserid = detail.userPay.userid;
                        this.detailOrderForm.userPayusername = detail.userPay.username;
                        this.detailOrderForm.userPaycurrencyid = detail.userPay.currencyid;
                        this.detailOrderForm.userPaycurrencyname = detail.userPay.currencyname;
                        this.detailOrderForm.userPayamount = detail.userPay.amount;
                    }
                    if (detail.agentPay) {
                        this.detailOrderForm.agentPaypaytime = detail.agentPay.paytime;
                        this.detailOrderForm.agentPayuserid = detail.agentPay.userid;
                        this.detailOrderForm.agentPayusername = detail.agentPay.username;
                        this.detailOrderForm.agentPaycurrencyid = detail.agentPay.currencyid;
                        this.detailOrderForm.agentPaycurrencyname = detail.agentPay.currencyname;
                        this.detailOrderForm.agentPayamount = detail.agentPay.amount;
                    }
                },
                complete: () => {
                    this.detailOrderVisible = true;
                }
            });
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.UserCheckImage {
    max-height: 100px;
    max-width: 100px;
    width: 100%;
}
</style>
